class Comment extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            list: [

            ],
            id: '0',
            start: 0,
            pagesize: 25,
            ishide: 'none',
            keyword: '',
            counts: [],
            pagestart: 0,
            clicknew: !1,
            ischa:!1,
        };
    }

    formatlist(list) {

        var that = this;
        var listitem = [];
        list.forEach((x, i) => {
           
            listitem.push(

                <tr key={i}>
                    <td><img className='avatar' img src={x.avatar} /></td>
                    <td className="tconter">{x.username}</td>
                    <td className="tconter content"><p>{x.contents}</p></td>
                   
                    <td className="tconter">{x.state == "0" ? "未审核" : (x.state == "1" ? "已通过":"未通过")}</td>
                    <td className="operatebox">
                        <div className='operate' id={"ope" + x.id}>
                            
                            <div data-toggle="modal" data-target="#modalOne">
                                <img src="./src/watch.png" />
                                {/* <p className='edit' >审核</p> */}
                                <p className='edit' onClick={this.todetail.bind(this, x.id)}>审核</p>
                            </div>
                            <div>
                                <img src={`./src/comment.png`} />
                                <p className='edit' onClick={this.seecommentresp.bind(this, x.id)}>查看评论</p>
                            </div>
                            <div>
                                <img src="./src/del.png" />
                                <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
                            </div>
                        </div>
                    </td>
                </tr>
            )
        })
    
        this.setState({
            listitem, list, originallist: list
        })



        // list.map((x, i) => {
        //     if (x.state == 0) {
        //         x.state = '未审核';
        //     }
        //     if (x.state == 1) {
        //         x.state = '已通过';
        //     }
        //     if (x.state == 2) {
        //         x.state = '未通过';
        //     }
        //     listitem.push(
        //         <tr key={i}>
        //             <td>
        //                 <img src={x.avatar} />
        //             </td>
        //             <td>{x.username}</td>
        //             <td>{x.contents}</td>
        //             <td>{x.state}</td>
        //             <td>
        //                 <div className="yangshi">
        //                     <p onClick={this.del.bind(this, x.id)}>删除</p>
        //                     <p className="order" onClick={this.toorder.bind(this, x.id, x.state)}>审核</p>
        //                     <p onClick={this.seecommentresp.bind(this, x.id)}>查看评论</p>
        //                 </div>

        //                 <div id={'ishide' + x.id} className='ishide'>
        //                     <div>
        //                         <label className="radio-inline">

        //                             <input type="radio" name="inlineCheckbox" id="inlineCheckbox0" onChange={this.statechange.bind(this, 0)} value="0" /> 未审核
        //                                     </label>
        //                         <label className="radio-inline">
        //                             <input type="radio" name="inlineCheckbox" id="inlineCheckbox1" onChange={this.statechange.bind(this, 1)} value="1" /> 已通过
        //                                     </label>
        //                         <label className="radio-inline">
        //                             <input type="radio" name="inlineCheckbox" id="inlineCheckbox2" onChange={this.statechange.bind(this, 2)} value="2" /> 未通过
        //                                     </label>

        //                     </div>




        //                     <div className="dv">
        //                         <input type="text" id={x.id} onChange={this.reasonchange.bind(this)} placeholder="请输入原因" className="yx" />
        //                         <span onClick={this.setcategoryorder.bind(this, x.id)} className="qr">确认</span><span onClick={this.toorder.bind(this, x.id)} className="qx">取消</span>
        //                     </div>


        //                 </div>

        //             </td>
        //         </tr>
        //     )


    }
    // 审核
    todetail(e) {
        var { list } = this.state, item = []
 
        list.forEach(x => {
            
            if (x.id == e) {
                var state = x.state

                $(`input[name=inlineCheckbox][value=${state}]`).prop("checked", "checked");
                 this.setState({ id: e, state,reason:x.reason})
            }
        });
       
    }
    edit(e, i) {

        var that = this;


    }
    inputschange(e) {
        console.log(e.target.value)
        var txt = e.target.value;
        this.setState({
            keyword: e.target.value
        })
    }
    cha(start) {
        var { keyword, pagesize,  } = this.state;
        if(keyword=='')return;
        this.freshlist(0)
        // var data = {keyword, pagesize, start}
        // Commentssearchlist(data, res => {
        //    if(res.issuccess==1){
        //     if (res.list) {
        //         if (start == 0) {
        //             let pagecount = Math.ceil(res.total / pagesize);
        //             this.setpager(pagecount, start);
        //             this.setState({ start, total: res.total,ischa:!0 })
        //         }
        //         this.formatlist(res.list);
        //         // this.setState({showswitch:!1})
        //     }
        //    }
        // })
    }
    // setlist(list) {



    //     var listitem = [];
        

    //     list.forEach((x, i) => {
           
    //         listitem.push(

    //             <tr key={i}>
    //                 <td><img src={x.avatar} /></td>
    //                 <td className="tconter">{x.username}</td>
    //                 <td className="tconter">{x.contents}</td>
    //                 <td className="tconter">{x.state}</td>
    //                 <td className="operatebox">
    //                     <div className='operate' id={"ope" + x.id}>
    //                         <div>
    //                             <img src="./src/del.png" />
    //                             <p className='edit colred' onClick={this.del.bind(this, x.id)}>删除</p>
    //                         </div>
    //                         <div data-toggle="modal" data-target="#modalOne">
    //                             <img src="./src/watch.png" />
    //                             {/* <p className='edit' >审核</p> */}
    //                             <p className='edit' onClick={this.todetail.bind(this, x.id)}>审核</p>
    //                         </div>
    //                         <div>
    //                             <img src={`./src/comment.png`} />
    //                             <p className='edit' onClick={this.seecommentresp.bind(this, x.id)}>查看评论</p>
    //                         </div>

    //                     </div>
    //                 </td>
    //             </tr>
    //         )
    //     })
    
    //     this.setState({
    //         listitem, list, originallist: list
    //     })

    // }

    //  查看评论
    seecommentresp(e) {
        window.location.href = './commentresp.html?id=' + e
    }

    del(e) {
        this.setState({ delid: e }, () => {
            $('#myModal').modal('toggle');
        })
    }
    confirmdel() {
        let { delid, start } = this.state
        delcomment(delid, res => {
            if (res.issuccess == 1) {
                alert('删除成功')
                $('#myModal').modal('toggle');
                this.freshlist(start)
            }
        })
    }
    setpage(e) {
        let { pagesize, start,ischa } = this.state
        pagesize = parseInt(e)
        start = 0
        this.setState({ pagesize, start }, () => {
            if(ischa){
                this.cha(start)
            }else{
                this.freshlist(start)
            }
        })
    }
    setpager(pagecount, start) {
        let counts = [];
        for (let i = 1; i < pagecount + 1; i++) {
            counts.push(start + i)
        }
        this.setState({ counts })
    }
    clickpage(e) {
        console.log(e)
        let { start, pagesize,ischa } = this.state
        start = e * pagesize
        this.setState({ pagestart: e, start }, () => {
            if(ischa){
                this.cha(start)
            }else{
                this.freshlist(start)
            }
        })
    }
    statechange(e) {
        console.log(e,'eeeeeee');
        
        $('#inlineCheckbox' + e).attr('checked', 'true')
        this.setState({
            state: e
        })

    }

    componentDidMount() {
        this.freshlist(0);
        // this.statechange(0);


        // getcategorylist(res=>{
        //     if(res.issuccess==1){
        //         $.cookie('categorylist',JSON.stringify(res.list))
        //     }
        // })
    }

    reasonchange(e) {
        this.setState({
            reason: e.target.value
        })

    }
    toorder(id) {
        var e = id;

        var { id } = this.state;
        var that = this;
        let { ishide } = this.state;
        $('#ishide' + e).toggle();
        // console.log(ishide,'hide');
        this.setState({ ishide });
        $("#" + e).val('');
        this.setState({
            id: e
        })

    }
    setcategoryorder(e) {
   

        var { id, state, reason,start } = this.state, err = "";
        console.log(id,'ididididi')
        console.log(state, 'statestatestatestate')
        console.log(reason,'reasonreasonreason')
        // if(reason.length==0) err="请填写原因";
  if (state ==-1&&(reason == undefined || reason.length == 0)) err = "请填写原因";
        if (state == undefined) err = "请填写审核结果";
        if (err.length > 0) {
            alert(err);
            return;
        }
        var data = { id, state, reason };
        mycomment(data, res => {
            if (res.issuccess == 1) {
                alert('设置成功');
                this.setState({
                    state: '',
                    reason: ''
                })
                console.log("1111")
                this.freshlist(start);
            }

        });


    }
    freshlist(start) {
        console.log(start);
        let { pagesize,keyword } = this.state;
        getcomment({ pagesize, start,keyword }, res => {

            if (res.issuccess == 1) {
                if (start == 0) {
                    let pagecount = Math.ceil(res.total / pagesize);
                    this.setpager(pagecount, start);
                    this.setState({ start, total: res.total })
                }
                this.formatlist(res.list);
            }



        })

    }
    reset() {
        this.setState({ keyword: '' },()=>{
            this.freshlist(0);
        });
    }
    render() {

        var { listitem, keyword, counts, pagestart, clicknew,reason ,state} = this.state;


        return (
            <div className="breadLinebox">
                <Modal content='确定要删除吗？' click={this.confirmdel.bind(this)} />
                <div className="modal fade" id="modalOne" >
                    <div className="modal-dialog">
                        <div className="modal-content">

                            <div className="modal-header border">
                                <p className="modal-title">审核</p>
                                <img data-dismiss="modal" src="./src/close.png" />
                            </div>
                            <div className="modal-body">
                                <div className="input-group countrys">
                                    <div className="countryname" >
                                   
                                        <div  className="radio"><input type="radio" name="inlineCheckbox" value="0" id="inlineCheckbox0" onChange={this.statechange.bind(this, '0')} /><label for="inlineCheckbox0"></label><span>未审核</span></div>
                                        <div  className="radio"><input type="radio" name="inlineCheckbox" value="1" id="inlineCheckbox1" onChange={this.statechange.bind(this, '1')} /><label for="inlineCheckbox1"></label><span>已通过</span></div>
                                        <div  className="radio"><input type="radio" name="inlineCheckbox" value="-1" id="inlineCheckbox2" onChange={this.statechange.bind(this, '-1')} /><label for="inlineCheckbox2"></label><span>未通过</span></div>
                                    </div>
                                </div>
                                <div className="input-group" style={{display:state==-1?'':'none'}}>
                                    <span className="input-group-addon">原因</span>
                                    <input value={reason}  onChange={this.reasonchange.bind(this)}  type="text" placeholder='请输入原因' className="input" />
                                </div>
                                <div className="modal-footer border">
                                <button type="button" className="closemod" data-dismiss="modal">关闭</button>
                                <button type="button" onClick={this.setcategoryorder.bind(this)} data-dismiss="modal"  className="submitmod">提交</button>
                            </div>
                            </div>
                        </div>
                    </div>
                </div>


                <div className='content_wrap panel-default content_wrap'>
                    <div className='breadLine '>
                        当前位置 > 评论管理
                            </div>

                    <div className="content">
                        <div className="tabletitbox">
                            <div className="tabletit">
                                <div className="search">
                                    <input onChange={this.inputschange.bind(this)} value={keyword} type="text" placeholder='请输入用户姓名' />
                                    <p onClick={this.cha.bind(this)}>查询</p>
                                    <p onClick={this.reset.bind(this)}>返回</p>
                                </div>
                            </div>
                        </div>


                        <table className="tab">
                            <thead>
                                <tr>

                                    <th>用户头像</th>
                                    <th className="tconter">用户名字</th>
                                    <th className="tconter">用户评论</th>
                                    <th className="tconter">评论审核</th>
                                    <th className="cz tconter">操作</th>
                                </tr>
                            </thead>
                            <tbody>
                                {listitem}
                            </tbody>
                        </table>
                    </div>
                    <div className="pagerbox">
                        <p>共{this.state.total}条</p>
                        <Pager counts={counts} click={this.clickpage.bind(this)} change={this.setpage.bind(this)} index={pagestart} />
                    </div>

                </div>
            </div>




        )
    }
}





ReactDOM.render(
    <div>
        <TopLine />
        <div id='body'>
            {/* <LeftMenu code='9'/> */}
            <LeftMenu code='comment' />
            <Comment />
        </div>
    </div>
    // <Barrage/>
    , $('.container')[0]
)